import React, { Component } from 'react'
import { Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import login from './index.module.css'
import axios from 'axios'
export default class Login extends Component {
    state = {
        userName: '',
        pwd: '',
        Verification: '',
        y: ''
    }
    codeKey = () => {
        console.log(1)
    }
    componentDidMount() {
        this.yzm()
    }
    //验证码
    yzm = () => {
        var arr = '123456789qwertyuiopasdfghjklzxcvbnm'
        var b = ''
        for (var i = 0; i < 6; i++) {
            let a = Math.floor(Math.random() * 35)
            b += arr[a]
        }
        this.setState({ Verification: b })

    }
    render() {
        const { userName, pwd, Verification, y } = this.state
        return <div className={login.login_box}>
            <div className={login.login_min}>
                <p className={login.login_top}>振涛教育考务管理后台</p>
                <p className={login.login_input}>
                    <Input prefix={<UserOutlined />} placeholder="输入账号" value={userName} onChange={e => this.setState({ userName: e.target.value })} />
                </p>
                <p className={login.login_input}>
                    <Input.Password value={pwd} placeholder="输入密码" prefix={<LockOutlined />} onChange={e => this.setState({ pwd: e.target.value })} />
                </p>
                <div className={login.login_input}>
                    <Input style={{ width: 150, height: 40 }} placeholder="请输入验证码" value={y} onChange={e => this.setState({ y: e.target.value })} />
                    <div onClick={() => this.yzm()}><i>{Verification}</i></div>
                </div>
                <p className={login.login_button}>
                    <Button onClick={() => this.subimt()} type="primary">登录</Button>
                </p>
            </div>
        </div>
    }
    // 登录
    error = (msg) => {
        message.error(msg);
    };
    // 验证码
    warning = () => {
        message.warning('验证码有误');
    };
    // 登录成功
    success = () => {
        message.success('登录成功');
    };
    subimt = () => {

        this.yzm()

        const { userName, pwd, Verification, y } = this.state
        axios.post('/login', { userName, pwd }).then(res => {
            const { msg, code } = res.data
            let status = '该账号已冻结'
            if (!code) {
                this.error(msg)
                this.setState({ pwd: '' })

                this.yzm()
                return
            }
            if (Verification !== y) {
                this.warning()
                this.setState({ y: '' })
                this.yzm()
                return
            }
            if (res.data.data[0].status === 'ok') {
                this.success()
                localStorage.user = res.data.data[0].userName
                localStorage.name = res.data.data[0].name

                this.props.history.push('/home')
                return
            }
            this.error(status)
        })
    }
}